<template>
  

<div class="line">
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">首頁</el-menu-item>
  <el-submenu index="2">
    <template slot="title">玄幻小說</template>
    <el-menu-item index="2-1">東方大陸</el-menu-item>
    <el-menu-item index="2-2">異世界</el-menu-item>
    <el-menu-item index="2-3">高無世界</el-menu-item>
  </el-submenu>
<el-submenu index="3">
    <template slot="title">都市生活</template>
    <el-menu-item index="2-1">藝術生涯</el-menu-item>
    <el-menu-item index="2-2">娛樂明星</el-menu-item>
    <el-menu-item index="2-3">青春校園</el-menu-item>
  </el-submenu>

  <el-menu-item index="3"></el-menu-item>
</el-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
